<template>
	<div class="count">
		<h1>当前求和为：{{sum}}</h1>
		<h1>当前求和放大10倍为：{{bigSum}}</h1>
		<h1>功能描述：{{describe}}</h1>
		<h1>作者：{{author}}</h1>
		<h1>笔名：{{PenName}}</h1>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="JIA(n)">+</button>
		<button @click="JIAN(n)">-</button>
		<button @click="jiaOdd(n)">当前和为奇数再+</button>
		<button @click="jiaWait(n)">等一等再+</button>
		<button @click="jiaServer">问问服务器再+</button>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1
			}
		},
		computed: {

			//借助mapState生成“一堆”计算属性，去读取state中的数据（对象形式） —— 推荐
			// ...mapState({he:'sum',miaoshu:'describe',zuozhe:'author'}),

			//借助mapState生成“一堆”计算属性，去读取state中的数据（数组形式） —— 推荐
			...mapState(['sum','describe','author']),

			...mapGetters(['bigSum','PenName'])

			//下面这些行是靠程序员自己去编写计算属性读取state中的数据 ———— 不推荐
			/* he(){
				return this.$store.state.sum
			},
			miaoshu(){
				return this.$store.state.describe
			},
			zuozhe(){
				return this.$store.state.author
			} */

		},
		methods: {
			// ...mapMutations({increment:'JIA',decrement:'JIAN'}),
			...mapMutations(['JIA','JIAN']),

			// ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait',incrementNetwork:'jiaServer'})
			...mapActions(['jiaOdd','jiaWait','jiaServer'])
			/* //当前和是奇数再加
			incrementOdd(){
				//分发一个“jiaOdd”的动作
				this.$store.dispatch('jiaOdd',this.n)
			},
			//等一会再加
			incrementWait(){
				//分发一个“jiaWait”的动作
				this.$store.dispatch('jiaWait',this.n)
			},
			//联系服务器加
			incrementNetwork(){
				//分发一个“jiaServer”的动作，内部会联系服务器，看看到底加几
				this.$store.dispatch('jiaServer')
			} */
		},
		mounted() {
			// let result = mapState({'he':'sum',miaoshu:'describe',zuozhe:'author'})
			// console.log(result)
		},
	}
</script>

<style scoped>
	*{
		margin-left: 10px;
	}
	.count{
		background-color: skyblue;
		padding: 20px;
	}
</style>